{% extends 'html/all.html' %}
{% block title %}
我的预订
{% endblock %}
{% block content %}
    <div class="row row-cols-md-3 g-4">
        <!-- 这里将会动态添加产品卡片 -->
    </div>
{% endblock %}
{% block scripts %}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        $(document).ready(function () {
            $.ajax({
                url: '/api/my_buys',  // API 的 URL
                type: 'GET',
                success: function (response) {
                    if (response.status === 'success') {
                        var productRow = $('.row-cols-md-3.g-4').first();  // 获取产品行
                        productRow.empty();  // 清空现有的产品卡片
                        response.data.forEach((item) => {
                            var productCard = $(
                                `<div class="col">
                            <div class="card">
                                <img alt="产品图片" class="card-img-top" src="${item.ImageURL}"/>
                                <div class="card-body">
                                    <h5 class="card-title">${item.ProductName}</h5>
                                    <p class="card-text">${item.Price}￥</p>
                                    <a class="btn btn-primary" href="/details?id=${item.ProductID}">查看详情</a>
                                    ${item.success_shipments && !item.IsSold ? '<button class="btn btn-success confirm-receipt">确认收货</button>' : ''}
                                    ${item.IsSold ? '<span>已售</span>' : ''}
                                </div>
                            </div>
                        </div>`
                            );
                            productCard.find('.confirm-receipt').click(function () {
                                var confirmation = confirm('请确认信息：商品ID：' + item.ProductID + '，商品名字：' + item.ProductName + '，商品价格：' + item.Price);
                                console.log(item.ProductID);
                                if (confirmation) {
                                    $.ajax({
                                        url: '/api/success_buy',
                                        type: 'POST',
                                        contentType: 'application/json',
                                        data: JSON.stringify({
                                            product_id: item.ProductID
                                        }),
                                        success: function (response) {
                                            if (response.status === 'success') {
                                                alert('确认收货成功');
                                                location.reload();
                                            } else {
                                                alert('确认收货失败: ' + response.msg);
                                            }
                                        },
                                        error: function (xhr, status, error) {
                                            alert('AJAX 请求失败: ' + error);
                                        }
                                    });
                                }
                            });
                            productRow.append(productCard);
                        });
                    } else {
                        console.error('加载产品失败:', response.message);
                    }
                },
                error: function (xhr, status, error) {
                    console.error('AJAX 请求失败:', error);
                }
            });
        });
    </script>
{% endblock %}